<template>
  <div>
    <!-- v-model指令，作用是用来进行表单的双向绑定 , v-model="动态数据" -->
    <input type="text" v-model="text" />
    <div>{{ text }}</div>
    <!-- v-model 的实现原理， 使用了 v-bind绑定value + @input/@change 事件 ， 在事件里面获取表单的最新的数据，同步到data里面 -->
    <input type="text" :value="val" @input="change" />
    <div>{{ val }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "a",
      val: "111",
    };
  },
  methods: {
    change(e) {
      //   console.log("val改变了");
      // 获取最新的 input里面的内容，同步到data里面就可以实现双向绑定
      //   console.log(e.target.value);
      this.val = e.target.value;
    },
  },
};
</script>
